<template>
	<!-- <view class=""> -->

	<view class="container">
		<!-- 附件信息 -->
		<view class="attachment">
			<view class=" customer-info-title flex-align">
				<view class="line"></view>
				<view class="info-title-text">附件信息</view>
			</view>
			<!-- 身份证照片 -->
			<view class="file-upload">
				<view class="file-upload-title">上传身份证照片
				</view>
				<view class="img-box flex-space">
					<view class="sfz-item" v-for="(item,index) in formData.type0" :key="index">
						<image :src="item.url" class="sfz-img"></image>
						<image @click="delImg" data-type="0" :data-index="index"
							src="../../../static/image/page/img-close.png" class="img-close">
						</image>
					</view>
					<view class="sfz-item" @click="chooseImg" data-type="0"
						v-if="!formData.type0 || formData.type0.length < 2">
						<image src="../../../static/image/page/sfz-box.png" class="sfz-img"></image>
					</view>
				</view>
			</view>
			<!-- 房产证照片 -->
			<view class="file-upload">
				<view class="file-upload-title">上传房产证照片</view>
				<view class="img-box">
					<view class="img-item" v-for="(item,index) in formData.type1" :key="index">
						<image :src="item.url" class="img-item-img"></image>
						<image @click="delImg" data-type="1" :data-index="index"
							src="../../../static/image/page/img-close.png" class="img-close">
						</image>
					</view>
					<view class="img-item" data-type="1" @click="chooseImg">
						<image src="../../../static/image/page/add-img.png" class="img-item-img"></image>
					</view>
				</view>
			</view>
			<!-- 房屋外观照 -->
			<view class="file-upload">
				<view class="file-upload-title">上传房屋外观照</view>
				<view class="tips-text">小区名字1张、小区入口1张、小区环境2张、估价对象本栋楼1张、小区其它栋2张、大楼入口1张、大楼栋数1张、电梯楼层数1张</view>
				<view class="img-box">
					<view class="img-item" v-for="(item,index)  in formData.type4" :key="index">
						<image :src="item.url" class="img-item-img"></image>
						<image @click="delImg" data-type="4" :data-index="index"
							src="../../../static/image/page/img-close.png" class="img-close">
						</image>
					</view>
					<view class="img-item" data-type="4" @click="chooseImg">
						<image src="../../../static/image/page/add-img.png" class="img-item-img"></image>
					</view>
				</view>
			</view>

			<!-- 房屋照片 -->
			<view class="file-upload">
				<view class="file-upload-title">上传房屋照片</view>
				<view class="tips-text">门牌号（开起门照）1张、室内各个房间（房间照全，如房屋是跃层客厅那张需把楼梯和客厅一起照出来）1张、阳台望向室外1张</view>
				<view class="img-box">
					<view class="img-item" v-for="(item,index) in formData.type5" :key="index">
						<image :src="item.url" class="img-item-img"></image>
						<image @click="delImg" data-type="5" :data-index="index"
							src="../../../static/image/page/img-close.png" class="img-close">
						</image>
					</view>
					<view class="img-item" data-type="5" @click="chooseImg">
						<image src="../../../static/image/page/add-img.png" class="img-item-img"></image>
					</view>
				</view>
			</view>
			<!-- 签约文件照片 -->
			<view class="file-upload">
				<view class="file-upload-title">上传签约文件照片</view>
				<view class="img-box">
					<view class="img-item" v-for="(item,index) in formData.type3" :key="index">
						<image :src="item.url" class="img-item-img"></image>
						<image @click="delImg" data-type="3" :data-index="index"
							src="../../../static/image/page/img-close.png" class="img-close">
						</image>
					</view>
					<view class="img-item" data-type="3" @click="chooseImg">
						<image src="../../../static/image/page/add-img.png" class="img-item-img"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 房屋视频 -->
		<view class="file-upload">
			<view class="file-upload-title">上传房屋视频</view>

			<view class="video-box" v-if="formData.type2 && formData.type2[0]">
				<video :src="formData.type2[0].url" class="add-video"></video>
				<image @click="delImg" data-type="2" :data-index="0" src="../../../static/image/page/img-close.png"
					class="img-close"></image>
			</view>

			<!-- <video v-if="video" @click="chooseVideo" :src="video.tempFilePath" class="add-video"></video> -->
			<image v-else @click="chooseVideo" src="../../../static/image/page/add-video.png" class="add-video">
			</image>
		</view>
		<!-- 评估文件照片 -->
		<!-- <view class="file-upload">
			<view class="file-upload-title">上传评估文件照片</view>
			<view class="img-box">
				<view class="img-item" v-for="(item,index) in assessmentFile" :key="index">
					<image :src="item.path" class="img-item-img"></image>
					<image @click="delImg" data-key="assessmentFile" :data-index="index"
						src="../../../static/image/page/img-close.png" class="img-close">
					</image>
				</view>
				<view class="img-item" data-key="assessmentFile" @click="chooseImg">
					<image src="../../../static/image/page/add-img.png" class="img-item-img"></image>
				</view>
			</view>
		</view> -->

		<!-- 提交 -->
		<!-- <view @click="formSubmit" class="submit">提交</view> -->
	</view>
	<!-- </view> -->
</template>

<script>
	import {
		uploadFileTest
	} from '../../../common/util.js';
	export default {
		data() {
			return {
				id: '',
				housePhotos: [], //房屋照片
				video: null, //视频
				signPictures: [], //签约图片
				sfzReverse: null, //身份证反面
				sfzPositive: null, //身份证正面
				housePropertyCard: [], //房产证图片
				housingAppearance: [], //房屋外观照
				assessmentFile: [], //评估文件
				tbSurveyAccessoryList: [], //提交的所有附件---传给后端
				formData: {},
			}
		},
		onLoad: function(options) {

			this.id = options.id;
			if (this.id) {
				this.getSurveyAccessoryBySid();
			}

		},
		methods: {
			//获取图片信息
			getSurveyAccessoryBySid() {
				this.$api.getSurveyAccessoryBySid({
					sid: this.id
				}).then(res => {
					let {data} = res.data;
					//6个不嗯嗯
					for(let i=0;i<=5;i++){
						if(!data[`type${i}`]){
							data[`type${i}`] = []
						}
					}
					console.log(res.data.data)
					this.formData = res.data.data
				})
			},

			//删除图片
			delImg(e) {
				let {
					type,
					      index
				} = e.currentTarget.dataset;
				let data = this.formData['type' + type];
				    this.$api.deleteImg(data[index].id).then(res => {
				      data.splice(index, 1);
					  this.formData['type' + type]=data
				    })
			},

			//选择图片

			chooseImg(e) {
				let _this = this;
				let {
					key,
					type
				} = e.currentTarget.dataset;
				uni.chooseImage({
					count: type == 0 ? 1 : 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'],
					success(res) {
						// tempFilePath可以作为img标签的src属性显示图片
						console.log(res)
						const tempFiles = res.tempFiles;
						if (type == 0) {
							_this.upload(tempFiles[0], type)
						} else {
							_this.upload(tempFiles, type)
						}
					}
				})
			},

			//选择视频
			chooseVideo() {
				let _this = this;
				uni.chooseVideo({
					sourceType: ['camera'],
					maxDuration: 60,
					camera: 'back',
					success(res) {
						_this.upload(res, 2);
					}
				})
			},

			//保存数据
			addArriveImg2(obj) {
				return this.$api.addArriveImg2(obj).then(res => {
					return res.data.data;
				})
			},

			//获取上传
			async upload(arr, num) {
				//num 0-6  分别为 身份证  房产证  房屋视频  签约文件 房屋外观  房屋照    评估文件
				let urls = [];
				//单图/视频上传
				if (num == 2 || num == 0) {
					let ossRes = await this.$api.surveyGetMap();
					let credentials = ossRes.data.data;
					let itemArr = [];
					let suffix = '';
					let url = '';
					//传身份证
					if (num == 0) {
						itemArr = arr.path.split('.');
						suffix = itemArr[itemArr.length - 1];
						url = await uploadFileTest(arr.path, credentials, suffix);
					} else if (num == 2) {
						//传视频
						itemArr = arr.tempFilePath.split('.');
						suffix = itemArr[itemArr.length - 1];
						url = await uploadFileTest(arr.tempFilePath, credentials, suffix);
					}
					let obj = {
						url,
						type: num,
						size: arr.size,
						sid: this.id,
						showName: url,
					}
					let resData = await this.addArriveImg2(obj);
					let data = this.formData;
					this.formData['type' + num].push(resData);
				} else {
					//多图上传
					for (let index = 0; index < arr.length; index++) {
						let ossRes = await this.$api.surveyGetMap();
						let credentials = ossRes.data.data;
						let itemArr = arr[index].path.split('.');
						let suffix = itemArr[itemArr.length - 1];
						let url = await uploadFileTest(arr[index].path, credentials, suffix);
						let obj = {
							url,
							type: num,
							size: arr[index].size,
							sid: this.id,
							showName: url,
						}
						let resData = await this.addArriveImg2(obj);
						this.formData['type' + num].push(resData);
					}

				}

				return true;

			},
			//提交
			async formSubmit() {
				console.log('提交.............')
				if (this.sfzReverse) {
					await this.upload(this.sfzReverse, 0); //身份证反面
				}
				if (this.sfzPositive) {
					await this.upload(this.sfzPositive, 0); //身份证正面
				}
				if (this.housePropertyCard.length) {
					await this.upload(this.housePropertyCard, 1); //房产证图片
				}
				if (this.housingAppearance.length) {
					await this.upload(this.housingAppearance, 4); //房屋外观照
				}
				if (this.housePhotos.length) {
					await this.upload(this.housePhotos, 5); //房屋照片
				}
				if (this.signPictures.length) {
					await this.upload(this.signPictures, 3); //签约文件图片
				}
				if (this.assessmentFile.length) {
					await this.upload(this.assessmentFile, 6); //评估文件
				}
				if (this.video) {
					await this.upload(this.video, 2); //视频
				}
				console.log('111', this.formData);
				console.log('222', this.tbSurveyAccessoryList);
				let data = {
					tbSurveyAccessoryList: this.tbSurveyAccessoryList,
					tbSurveyData: JSON.parse(decodeURIComponent(this.formData))
				}
				this.$api.surveyAddData(data).then(res => {
					wx.showToast({
						title: '提交成功',
					})
					wx.navigateBack({
						delta: 3,
					})
				})


			},
		},
	}
</script>

<style scoped>
	page {
		background-color: #fff;
	}

	.container {
		padding: 40rpx 30rpx;
	}

	.customer-info-title {
		margin-bottom: 20rpx;
	}

	.line {
		width: 8rpx;
		height: 28rpx;
		background: #585CF7;
		border-radius: 4rpx;
		margin-right: 13rpx;
	}

	.info-title-text {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.divider {
		width: 100%;
		height: 20rpx;
		background: #F8F8F8;
	}

	.file-upload-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 40rpx;
	}


	.img-item {
		position: relative;
		margin-right: 30rpx;
		width: calc((100% - 90rpx)/3);
		height: 210rpx;
		margin-bottom: 30rpx;
		display: inline-block;
	}

	.img-item:nth-child(3n) {
		margin-right: 0;
	}

	.img-item-img {
		width: 100%;
		height: 210rpx;
		border-radius: 10px;
		margin-bottom: 30rpx;
	}

	.add-video {
		width: 100%;
		height: 300rpx;
		border-radius: 10px;
	}



	.img-close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: -5px;
		right: -8px;
		z-index: 99;
	}

	.submit {
		width: 100%;
		height: 98rpx;
		background: #585CF7;
		border-radius: 49rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 98rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.sfz-item {
		width: 324rpx;
		height: 280rpx;
		/* overflow: hidden; */
		border-radius: 10rpx;
		margin-bottom: 50rpx;
		position: relative;
	}

	.sfz-img {
		width: 100%;
		height: 220rpx;
	}

	.sfz-btn {
		width: 100%;
		height: 60rpx;
		background: #585CF7;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 53rpx;
		text-align: center;
	}

	.tips-text {
		font-size: 22rpx;
		color: #999999;
		line-height: 30rpx;
		margin-bottom: 40rpx;
	}

	.video-box {
		position: relative;
	}
</style>
